<script setup>
import { Search, Edit, Delete } from "@element-plus/icons-vue";
import { ref } from "vue";
const log = ref([]);

//分页条数据模型
const page = ref(1); //当前页
const total = ref(20); //总条数
const pageSize = ref(5); //每页条数

//声明一个异步函数
import { logInfoService } from "@/api/log.js";
const logList = async () => {
  try {
    let params = {
      page: page.value,
      pageSize: pageSize.value
    };
    let result = await logInfoService(params);
    //渲染视图
    total.value = result.data.total;
    log.value = result.data.rows;
  } catch (error) {
    console.error("Error data: ", error);
  }
};
logList();

//当每页条数发生了变化，调用此函数
const onSizeChange = (size) => {
  pageSize.value = size;
  logList();
};
//当前页码发生变化，调用此函数
const onCurrentChange = (num) => {
  page.value = num;
  logList();
};
</script>
<template>
  <el-card class="page-container">
    <template #header>
      <div class="header">
        <h1>日志列表</h1>
        <div class="extra">
        </div>
      </div>
    </template>
    <el-table :data="log" style="width: 100%">
      <el-table-column label="序号" width="100" type="index"> </el-table-column>
      <el-table-column label="操作时间" prop="loggTime"></el-table-column>
      <el-table-column label="操作人" prop="loggName"></el-table-column>
      <el-table-column label="操作详情" prop="loggDescription"></el-table-column>
      <template #empty>
        <el-empty description="没有数据" />
      </template>
    </el-table>
    <!-- 分页条 -->
    <el-pagination
      v-model:current-page="page"
      v-model:page-size="pageSize"
      :page-sizes="[3, 5, 10, 15]"
      layout="jumper, total, sizes, prev, pager, next"
      background
      :total="total"
      @size-change="onSizeChange"
      @current-change="onCurrentChange"
      style="margin-top: 20px; justify-content: flex-end"
    />
  </el-card>
</template>

<style lang="scss" scoped>
.page-container {
  min-height: 100%;
  box-sizing: border-box;

  .header {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
}
</style>